<template>
  <div id="app">
    <NavigationBar></NavigationBar>
    <div class="page">
      <transition :name="animte">
        <!-- transition:vue提供的过渡标签，可以用来设置过渡动画 -->
        <router-view></router-view>
      </transition>
    </div>

    <TabBar :options="items"></TabBar>
  </div>
</template>

<script>
import TabBar from "@/components/TabBar.vue";
import NavigationBar from "@/components/NavigationBar.vue";

export default {
  name: "App",
  data: function () {
    return {
      items: [
        {
          title: "首页",
          fontName: "iconfont icon-SSS",
          route: { name: "home" }
        },
        {
          title: "发现",
          fontName: "iconfont icon-faxian",
          route: { name: "find" }
        },
        {
          title: "订单",
          fontName: "iconfont icon-icon--copy",
          route: { name: "order" }
        },
        {
          title: "我的",
          fontName: "iconfont icon-wode1",
          route: { name: "mine" }
        }
      ],
      animte: ""
    };
  },
  watch: {
    $route: function (to, from) {
      // this.animte = to.meta.index - from.meta.index >= 0 ? "push" : "pop";
      if (from.meta.kind==to.meta.kind) {
        this.animte=(to.meta.index - from.meta.index)>0?"push":"pop";
      } else {
        this.animte="";
      }
    }
  },
  components: {
    TabBar,
    NavigationBar
  }
};
</script>

<style lang="less">
#app {
  width: 100%;
  height: 100%;
}
.page {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding-top: 44px; /*no*/
  position: relative;
}
// 设置过渡过程中对用的两个页面的过渡属性和定位
.push-enter-active,
.push-leave-active,
.pop-enter-active,
.pop-leave-active {
  // 进入页面动画和出去页面动画
  position: absolute;
  left: 0;
  top: 44px; /*no */
  // 设置整个过度动画
  transition: all 0.5s linear;
}
// 设置过渡过程中两个页面的初始和结束状态
.push-enter,
.pop-leave-to {
  transform: translateX(100%);
}
.push-leave-to,
.pop-enter {
  transform: translateX(-100%);
}
</style>
